<!-- 农事服务下单 -->
<template>
	<view>
		<!-- tabbar -->
		<uni-nav-bar title="农事服务下单" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<!-- content -->
		<view class="main" v-if="projectObj">
			<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - 100 + 'px'}">
				<view class="top">
					<view class="top-left">
						<image :src="projectObj.organizationPicture" mode=""></image>
					</view>
					<view class="top-right">
						<view class="title">
							{{projectObj.name}}
						</view>
						<view class="project">
							<view class="title">服务时间：</view>
							<view class="content">
								{{projectObj.startTime}}~{{projectObj.endTime}}
							</view>
						</view>
						<view class="project">
							<view class="title">地址：</view>
							<view class="content">
								{{projectObj.address}}
							</view>
						</view>
					</view>
				</view>
				<view class="center">
					请选择您需要的服务
				</view>
				<view class="bottom">
					<view class="service-title" v-for="item in projectObj.serviceProjectList" :key="item.id">
						<view class="service-item" @click="goOrder(item)">
							<view class="item" v-if="item.name === '农机租赁'">
								<image src="@/static/socialized-service/farm-service/service-order/machinery.png"
									mode=""></image>
							</view>
							<view class="item item1" v-else-if="item.name === '设施租赁'">
								<image src="@/static/socialized-service/farm-service/service-order/arable.png" mode="">
								</image>
							</view>
							<view class="item item2" v-else-if="item.name === '翻耕整地'">
								<image src="@/static/socialized-service/farm-service/service-order/FGZD.png" mode="">
								</image>
							</view>
							<view class="item item1" v-else-if="item.name === '机插秧'">
								<image src="@/static/socialized-service/farm-service/service-order/JCY.png" mode="">
								</image>
							</view>
							<view class="item item3" v-else-if="item.name === '作物收割'">
								<image src="@/static/socialized-service/farm-service/service-order/ZWSG.png" mode="">
								</image>
							</view>
							<view class="item item2" v-else-if="item.name === '作物播种'">
								<image src="@/static/socialized-service/farm-service/service-order/ZWBZ.png" mode="">
								</image>
							</view>
							<view class="item item1" v-else-if="item.name === '无人机打药'">
								<image src="@/static/socialized-service/farm-service/service-order/DY.png" mode="">
								</image>
							</view>
							<view class="item item2" v-else-if="item.name === '秸秆离田'">
								<image src="@/static/socialized-service/farm-service/service-order/jglt.svg" mode="">
								</image>
							</view>
							<view class="item item1" v-else-if="item.name === '农产品收购'">
								<image src="@/static/socialized-service/farm-service/service-order/purchase.png"
									mode=""></image>
							</view>
							<view class="item" v-else-if="item.name === '农产品加工'">
								<image src="@/static/socialized-service/farm-service/service-order/drying.png" mode="">
								</image>
							</view>
							<view class="item item1" v-else-if="item.name === '维保服务'">
								<image src="@/static/socialized-service/farm-service/service-order/weibaofuwu.svg" mode="">
								</image>
							</view>
							<view class="item item1" v-else-if="item.name === '封存服务'">
								<image src="@/static/socialized-service/farm-service/service-order/njfc.svg" mode="">
								</image>
							</view>
							<view class="title" :class="{ 'jg': item.name === '农产品加工' }">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-ios-lineline"></view>
				<view class="bottom-ios-line"></view>
			</scroll-view>
		</view>
		<!-- noDate -->
		<view v-else>
			<view class="blank">
				<image src="@/static/blank.png" mode=""></image>
				<view class="nodata">
					暂无数据
				</view>
			</view>
		</view>
		<!-- bottomTabar -->
		<bottomTabar />
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	// import API from '@/api/socialized-servce/farm-service/normalUser/serviceSelect/service-organization/service-order/index.js'
	import bottomTabar from '../../../components/normalUser-tabar/index.vue'
	export default {
		components: {
			bottomTabar,
		},
		data() {
			return {
				projectObj: {}
			}
		},
		mounted() {
			this.setcollapseheight()
			this.projectObj = JSON.parse(uni.getStorageSync('projectObj'))
			console.log(this.projectObj)
		},
		methods: {
			goOrder(item) {
				uni.setStorageSync('serviceProjectNo', item.serviceProjectNo)
				uni.setStorageSync('serviceTypeName1', item.name)
				uni.setStorageSync('svcClassId', item.svcClassId)
				uni.setStorageSync('svcObjIdPropertyMap', item.svcObjIdPropertyMap)
				if (item.name === '农机租赁' || item.name === '设施租赁') {
					uni.reLaunch({
						url: `/subPage1/socialized-service/farm-service/user/rentMachineryOrArable/serviceReservation`
					})
				} else {
					uni.redirectTo({
						// url: `/subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/information-filling`,//翻耕整地
						url: '/subPage1/socialized-service/farm-service/order/order'
					})
				}
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			back() {
				uni.redirectTo({
					url: `/subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/service-organization`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 主体
	.main {
		height: 100%;
		background: #F5F6FA;
		padding: 20rpx 40rpx 0 40rpx;

		.top {
			display: flex;
			box-sizing: border-box;
			// height: 202rpx;
			padding: 28rpx;
			background-color: #fff;

			.top-left {
				width: 208rpx;
				// height: 138rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.top-right {
				.title {
					font-size: 16px;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #91743E;
				}

				.project {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.title {
						min-width: 75rpx;
						font-size: 12px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #5C5C5C;
					}

					.content {
						font-size: 24rpx;
						font-family: Arial-Regular, Arial;
						font-weight: 400;
						color: #222222;
					}
				}
			}
		}

		.center {
			margin-top: 38rpx;
			margin-bottom: 38rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}

		.bottom {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.service-title {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #434343;
				margin-bottom: 30rpx;

				.service-item {
					position: relative;
					display: flex;

					width: 322rpx;
					height: 188rpx;

					.item {
						width: 100%;
						height: 100%;
						background: linear-gradient(360deg, #805AFF 0%, #B9B9FF 100%);
						box-shadow: 0rpx 12rpx 12rpx 2rpx rgba(33, 222, 157, 0.05);
						border-radius: 28rpx 28rpx 28rpx 28rpx;

						image {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 162rpx;
							height: 116rpx;
						}

					}

					.item1 {
						background: linear-gradient(360deg, #3E54FF 0%, #A0CCFF 100%);
					}

					.item2 {
						background: linear-gradient(360deg, #805AFF 0%, #B9B9FF 100%);
					}

					.item3 {
						background: linear-gradient(360deg, #3E54FF 0%, #A0CCFF 100%);
					}

					.title {
						position: absolute;
						font-size: 28rpx;
						color: #fff;
						top: 69rpx;
						right: 44rpx;

						&.jg {
							right: 14rpx;
						}
					}
				}

			}
		}
	}

	.blank {
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.nodata {
			margin-top: 20rpx;
		}
	}
</style>